<template>
    <div>
        <template v-if="show">
            <div class="header">
                <router-link to="/list" class="header-title">
                  <img alt="" src="static/img/favicon.ico" style="width: 50px;border-radius: 50%">
                </router-link>
              <router-link to="/homepage" class="header-title">
                电商网站首页
              </router-link>
                <div class="header-menu">

                  <router-link to="/cart" >
                    <el-button type="warning" style="height: 40px">购物车
                      <div v-if="cartList.length"
                           style="color: white;
                           background-color: red;
                           border-radius: 50%;
                           height: 15px;width: 15px;
                           text-align: center;
                           left: 44px;
                           top: -14px;
                           position: relative;">
                        {{cartList.length}}
                      </div>
                    </el-button>
                    </router-link>
                </div>

                <div class="header-menu">
                  <router-link to="/personalInf" >
                    <el-button type="primary">个人主页</el-button>
                  </router-link>
                </div>

                <div class="header-menu">
                  <el-button type="danger" @click="cleanInf" >退出登录</el-button>
                </div>
            </div>
        </template>
        <!-- 挂载所有路由 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data(){
            return {
              show:false,
              user: this.$store.state.username
            }
        },
      methods:{
          cleanInf(){
            this.$notify({
              message: '登出成功',
              type:"success"
            });
            window.localStorage.clear();
            this.show=!this.show
            this.$router.push('/login')
          },
        showHeader(){
          if (localStorage.getItem('userName')){
            this.show=true
          }
        }
      },
        computed: {
            cartList(){
                return this.$store.state.cartList;
            },
            // show(){
            //       return !!this.$store.state.loginStatus;
            //
            //  }
        },
        updated() {
         this.showHeader()
        }
    }
</script>

<style scoped>
body{
  overflow: auto;
  height: 100%;
  background: linear-gradient(45deg, #4d4279, #43879b);
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
}
</style>
